<!-- 数字卡片模块 -->
<template>
  <div class="num-card">
    <div class="num-item" v-for="(num, index) of numList" :key="index" :data-num="num">
      <span
        :style="{
          animationDuration: `${index * 0.3 + 2}s`,
        }"
      ></span>
    </div>
  </div>
</template>
<script lang="ts">
import { Vue, Prop, Options } from 'vue-property-decorator';
@Options({ components: {} })
export default class NumCard extends Vue {
  @Prop() public num!: number;
  public get numList(): string[] {
    return Math.min(999999999999, this.num)
      .toString()
      .split('');
  }
}
</script>
<style scoped lang="postcss">
.num-card {
  display: inline-block;
  margin-left: 3px;
  .num-item {
    position: relative;
    margin-right: 3px;
    display: inline-block;
    width: 22px;
    height: 28px;
    background: rgba(0,0,0,0.3);
    border-radius: 2px;
    overflow: hidden;
    span {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 1000%;
      background: #ffebcb;
      transform: translateY(-90%);
      mask: url(https://mat1.gtimg.com/qqcdn/qqnews_design/20211023_leopard/assets/applause_num.2b60370f.png) repeat-y center top;
      mask-size:100% 100%;
      animation: initAni 1s 0.8s ease-out forwards;
    }
    @for $i from 0 through 9 {
      &[data-num='$i'] {
        span {
          mask-position: center calc($i * -28px);
        }
      }
    }
  }
}
@keyframes initAni {
  to {
    transform: none;
  }
}
</style>
